#controles{
    position: relative;
    width: 100%;
    height: 250px;
    top: 2px;
}

#controlesR{
    position: relative;
    width: 100%;
    height: 290px;
    top: 2px;
}

#opciones{
    position: relative;
    width: 100%;
    height: 145px;
}

.verde{
    background-image: url('../images/verde.png');
}

.tdSup{
    height:250px;
}

.lienzo {
    position: relative;
    border: solid 1px #0081C2;
    background-color: white;
    width: 100%;
    height: 350px;
    margin-top: 8px;
}

.lienzoRegla {
    position: relative;
    border: solid 1px #0081C2;
    background-color: white;
    width: 100%;
    height: 260px;
    margin-top: 2px;
}

.detalle-componente {
    position: relative;
    /*border: solid 1px #0081C2;*/
    
    width: 100%;
    height: 155px;
    overflow: auto;
}

.detalle-componenteR {
    position: relative;
    width: 100%;
    height: 170px;
    overflow: auto;
}

.comp1{
    background-image: url('../images/comp1.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
    z-index: 10;
}

.comp3{
    background-image: url('../images/comp2.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
    z-index: 10;
}

.comp2{
    background-image: url('../images/form.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
     z-index: 10;
}



.variables{
    background-image: url('../images/variable.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
     z-index: 10;
}

.tipodocumentos{
    background-image: url('../images/document.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
     z-index: 10;
}

.conexion{
    background-image: url('../images/line.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
     z-index: 10;
}

.conexionAlt{
    background-image: url('../images/conex_alt.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
     z-index: 10;
}

.regla{
    background-image: url('../images/path.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
     z-index: 10;
}

.agregar{
    background-image: url('../images/add.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 21px;
    margin: 0px 0 0 4px;
    cursor: pointer;
     z-index: 10;
}

.borrar{
    background-image: url('../images/eliminar.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 16px;
    margin: 4px 0 1px 8px;
    cursor: pointer;
    z-index: 10;
}

.seleccionado{
    border: solid 1px red;
    /*-moz-box-shadow: 1px 1px 2px red;
    -webkit-box-shadow: 1px 1px 2px red;
    box-shadow: 1px 1px 2px red;*/
}

#notificacion {
    background:  #FFFFCC;
    border: 1px solid #CCCCCC;
    margin-bottom: 4px;
    margin-left: 10px;
    margin-top: 5px;
    padding: 5px 20px 5px 20px;
    text-align: justify;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 150px;
    float: right;
   /* left: 295px;*/
}

.salida{
    background-image: url('../images/var-dot.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
     z-index: 12;
}

.entrada{
    background-image: url('../images/in.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
     z-index: 12;
}

.salida-alterna{
    background-image: url('../images/out-false.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
     z-index: 12;
}

.salida-negativa{
    background-image: url('../images/neg-out.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
     z-index: 12;
}

.proceso{
    background-image: url('../images/proceso.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
    z-index: 10;
}

.comp-and{
    background-image: url('../images/and_.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
    z-index: 10;
    background-size: 100%;
}

.comp-or{
    background-image: url('../images/or.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
     z-index: 10;
     background-size: 100%;
}

.comp-xor{
    background-image: url('../images/xor.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px 0 0 4px;
    cursor: pointer;
     z-index: 10;
     background-size: 100%;
}

.grande {
    width: 96px;
    height: 96px;
    background-size: 100%;
}

.div-der {
 position:relative;
 top:0;
 right:0;
 width:50%;
 /*float: right;*/
 height: 100%;
 
}

.div-izq {
 position:relative;
 top:0;
 left:0;
 width:50%;
 /*float: left;*/
 height: 100%;
}

.absoluto{
    position:absolute;
}
.green {
    background-color:greenyellow;
    border:1px solid green;
    opacity:0.6;
}

.shadowConx {
	-moz-box-shadow: 1px 1px 2px red;
	-webkit-box-shadow: 1px 1px 2px red;
	box-shadow: 1px 1px 2px red;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid black;        
        margin:  -6px 0 0 0px;        
        left: 50%;    
        position: relative;
        z-index: 10;
}


.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent; 
	border-right:8px solid black; 
        margin:  -6px 0 0 0px;
        position: relative;
        right: 50%;
        z-index: 10;
}

.labelEntrada{
    position: relative; 
    left: -200px; 
    top: -5px;
    /*white-space: nowrap;*/
    width: 200px;
    text-align: right;
}

.labelSalida{
    position: relative; 
    right: -30px; 
    top: -5px;
    /*white-space: nowrap;*/
    width: 200px;
    text-align: left;
}

.labelEstacion{
    position: relative; 
    text-align: center;
    width: 100px;
    right: 32px; 
    top: 35px;
}

.circle-loader{
    background-image: url('../images/ajax-loader.gif');
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    margin: 4px 0 0 4px;
    cursor: pointer;
    z-index: 10;
}